<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 0%;
            height: 30px;
            background-color: red;
        }
    </style>
</head>
<body>
<form action="">
    选择图片：<input type="file" name="myPhoto" id="myPhoto">
</form>
<img src="" alt="">
<audio src="" controls></audio>
<video src="" controls></video>
<div></div>
<!--1.需要访问资源，而资源一般是存储在服务器端，意味着我们需要向服务器发送请求
2.从服务器接收数据之后，需要解析为图片-->
<!--<img src="../images/l1.jpg" alt="">-->

<!--即时预览：并没有做数据提交
即时：让用户一选择图片就会进行相应的处理  onchange
预览：读取用户当前选择文件，使用readAsDataUrl进行解析

0：监听用户是否选择了文件 --onchange
1.获取用户选择的文件
2.创建文件读取对象
3.读取文件-readAsDataUrl
4.监听文件读取的状态-捕获文件成功读取的状态--onload
5.获取reader.result，赋值给src属性-->
<script>
    /*
     * 1.FileReader:读取的时候需要创建文件读取器对象  new FileReader();
     * 2.读取方法：
     *   readAsText：读取文本文件，所谓文本文件就是能够以.txt打开的文件,默认返回值为utf-8编码的字符串
     *   readAsBinaryString:将文件读取为二进制字符串，所有类型的文件都是二进制。但是这个方法一般不是用来读取文件进行展示，而是用来做文件的数据传递和存储。如，从客户端读取文件，转换为二进制，传递给后台服务器，服务器接收进行数据的存储
     *   readAsDataUrl:它读取文件，返回一个以data开头的字符串，这个字符串的本质就是dataUrl,dataUrl就是将资源(一般就是指图片或者其它的或以嵌入到文档的格式,如音频，视频.....)嵌入到文档的方式,它将资源转换为以base64编码的字符串，同时将这个字符串直接嵌入到url中*/

    document.querySelector("#myPhoto").onchange=function(){

        /*files:当前用户选择的文件列表*/
        /*console.log(document.querySelector('#myPhoto').files[0]);*/
        var myFile=document.querySelector('#myPhoto').files[0];
        /*1.创建文件读取器对象*/
        var reader=new FileReader();
        /*2.读取文件*/
        /*参数：blob:binary large object:文件对象
         * 方法没有返回值：但是在成功读取后，会将这个返回值存储在reader对象的result属性中*/
        reader.readAsDataURL(myFile);
        /*fileReader提供了一个完整的事件机制，用来监听文件读取过程中的状态
         * onabort:文件读取中断
         * onerror:文件读取错误
         * onload:文件成功读取完毕
         * onloadend:文件读取完毕，不管是否成功会触发
         * onloadtart:开始读取时
         * onprogress:读取过程中*/
        /*输出结果*/
        reader.onload=function(){
            console.log(reader.result);
            /*document.querySelector("img").src=reader.result;*/
            /*document.querySelector("audio").src=reader.result;*/
            document.querySelector("video").src=reader.result;
        };

        /*监听读取过程*/
        reader.onprogress=function(e){
            console.log(e.loaded+":"+ e.total);
            var percent= e.loaded/ e.total*100+"%";
            document.querySelector("div").style.width=percent;
        }
    }
</script>
</body>
</html>